<template>
  <div>count：{{ count }}</div>
  <button @click="add">增加</button>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      localCount: 10
    }
  },
  // computed: {
  //   count () {
  //     return this.$store.state.count
  //   }
  // },
  // computed: mapState({
  //   // 箭头函数可以使代码更简练
  //   // count: state => state.count
  //   // 传字符串参数 'count' 等同于 `state => state.count`
  //   // countAlias: 'count'
  //   // 为了能够使用 `this` 获取局部状态，必须使用常规函数
  //   countPlusLocalState (state) {
  //     return state.count + this.localCount
  //   }
  // }),
  // computed: mapState([
  //   // 映射 this.count 为 store.state.count
  //   'count'
  // ]),
  computed: {
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    add () {
      this.$store.commit('increment')
    }
  }
}
</script>

<style>

</style>